<?php
/**
 * Template Name: Pitch Search
 */
define("QUICK_CACHE_ALLOWED", false);
get_header(); ?>

<div class="container">
    <? while (have_posts()) : the_post(); ?>

    <?
    $custom = get_fields($post->ID);
    $currentID = $post->ID;
    //var_dump($fields);
    ?>

    <div>

        <h1><? the_title() ?> <span id="result-count" style="float:right;font-size: 30px;margin-right: 341px;"></span></h1>

        <div class="row-fluid">
            <div class="span8">
                <div id="pitch-results">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/loader.gif"/>
                </div>


            </div>
            <div class="span4">
                <div class="card grey">
                    <h2>Refine Search</h2>
                    <form id="refine-search" style="margin:0;">
                        <!--
                        <fieldset>
                            <label>Sort By</label>
                            <select id="refine-sort">
                                <option value="name">Sort By Name</option>
                                <option value="distance">Sort By Distance</option>
                                <option value="price">Sort By Price</option>
                            </select>

                        </fieldset>
                        <fieldset>
                            <label>Your Location?</label>
                            <input id="refine-location" type="text" placeholder="Your Location">

                        </fieldset>
                        -->
                        <fieldset>
                            <label>Name Search</label>
                            <input id="refine-name" type="text" placeholder="Search">

                        </fieldset>
                        <fieldset>
                            <label>Date</label>
                            <select id="refine-date">
                                <option value="">Any</option>
                                <?
                                for ($a = 0; $a <= 13; $a++) {
                                    echo '<option value="'
                                        . date('Ymd', strtotime('+' . $a . ' day'))
                                        . '">'
                                        . date('l, j F Y', strtotime('+' . $a . ' day'))
                                        . '</option>';
                                }
                                ?>
                            </select>
                        </fieldset>
                        <fieldset>
                            <label>Time</label>
                            <select id="refine-time">
                                <option value="">Any</option>
                                <?
                                for ($a = 0; $a <= 59; $a++) {
                                    echo '<option value="'
                                        . date('Hi', strtotime('today 0900 +' . $a*15 . ' minutes'))
                                        . '">'
                                        . date('H:i', strtotime('today 0900 +' . $a*15 . ' minutes'))
                                        . '</option>';
                                }
                                ?>
                            </select>
                        </fieldset>

                        <!--
                        <fieldset>
                            <div style="width:136px;display:inline-block">
                                <label>Max Price</label>
                                <div class="input-prepend">
                                    <span class="add-on">£</span>
                                    <input id="refine-max-price" class="span5" type="number" value="100">
                                </div>
                            </div>
                        </fieldset>
                        -->

                        <fieldset>
                            <label>Size</label>
                            <select id="refine-size">
                                <option value="">Any</option>
                                <option>11 A Side</option>
                                <option>8 A Side</option>
                                <option>7 A Side</option>
                                <option>5 A Side</option>
                            </select>

                        </fieldset>
                        <fieldset>
                            <label>Surface</label>
                            <select id="refine-surface">
                                <option value="">Any</option>
                                <option>Grass</option>
                                <option>Astro Turf</option>
                                <option>2G</option>
                                <option>3G</option>
                                <option>4G</option>
                                <option>5G</option>
                            </select>
                        </fieldset>

                        <a style="margin-bottom:10px;clear:both;display: block;cursor: pointer;" data-toggle="collapse" data-target="#democ">
                            Show All Fields
                        </a>

                        <div id="democ" class="collapse">

                            <fieldset>
                                <label>Floodlit</label>
                                <select id="refine-floodlit">
                                    <option value="">Any</option>
                                    <option>Yes</option>
                                    <option>No</option>
                                </select>

                            </fieldset>
                            <fieldset>
                                <label>Goal Size</label>
                                <select id="refine-goal-size">
                                    <option value="">Any</option>
                                    <option>Junior</option>
                                    <option>Senior</option>
                                </select>

                            </fieldset>
                            <fieldset>
                                <label>Indoor</label>
                                <select id="refine-indoor">
                                    <option value="">Any</option>
                                    <option>Yes</option>
                                    <option>No</option>
                                </select>

                            </fieldset>
                            <fieldset>
                                <label>Nets</label>
                                <select id="refine-nets">
                                    <option value="">Any</option>
                                    <option>Included</option>
                                    <option>Not Included</option>
                                </select>

                            </fieldset>
                            <fieldset>
                                <label>Parking</label>
                                <select id="refine-parking">
                                    <option value="">Any</option>
                                    <option>Available</option>
                                    <option>No</option>
                                </select>
                            </fieldset>
                            <fieldset>
                                <label>Changing Rooms</label>
                                <select id="refine-changing-rooms">
                                    <option value="">Any</option>
                                    <option>Yes</option>
                                    <option>No</option>
                                </select>
                            </fieldset>
                            <fieldset>
                                <label>Showers</label>
                                <select id="refine-showers">
                                    <option value="">Any</option>
                                    <option>Yes</option>
                                    <option>No</option>
                                </select>
                            </fieldset>
                            <fieldset>
                                <div style="width:136px;display:inline-block">
                                    <label>Min Width</label>
                                    <div class="input-append">
                                        <input id="refine-min-width" class="span5" type="number" placeholder="0">
                                        <span class="add-on">m</span>
                                    </div>
                                </div>
                                <div style="width:136px;display:inline-block">
                                    <label>Max Width</label>
                                    <div class="input-append">
                                        <input id="refine-max-width" class="span5" type="number" placeholder="100">
                                        <span class="add-on">m</span>
                                    </div>
                                </div>

                            </fieldset>
                            <fieldset>
                                <div style="width:136px;display:inline-block">
                                    <label>Min Length</label>
                                    <div class="input-append">
                                        <input id="refine-min-length" class="span5" type="number" placeholder="0">
                                        <span class="add-on">m</span>
                                    </div>
                                </div>
                                <div style="width:136px;display:inline-block">
                                    <label>Max Length</label>
                                    <div class="input-append">
                                        <input id="refine-max-length" class="span5" type="number" placeholder="100">
                                        <span class="add-on">m</span>
                                    </div>
                                </div>

                            </fieldset>
                        </div>


                    </form>
                </div>
            </div>
        </div>


    </div>

    <? endwhile; ?>
</div>

<?php get_footer(); ?>

<script src="<?php echo get_template_directory_uri(); ?>/js/PW.pitchSearch.js"></script>
<script>
    var results = [];

    <?php

    $pitch_query = new WP_Query(array('post_type' => 'pitch', 'showposts' => 1000));
    while ($pitch_query->have_posts()) : $pitch_query->the_post();
        //set_time_limit(300);
        $pitchID = $pitch_query->post->ID;
        $pitchData = get_fields($pitchID);
        $venueData = get_fields(getVenueID($pitchID));
        ?>

    results.push({

        <? foreach ($pitchData as $key => $value) { ?>
            '<? echo "pitch_".$key ?>':'<? echo $value ?>',
        <? } ?>

        <? foreach ($venueData as $key => $value) { ?>
            '<? echo "venue_".$key ?>':'<? echo $value ?>',
        <? } ?>

        <?
            //$price = get_field('price',($pitchID))
        ?>

        'pitch_image_url':'<?php echo getImageURL( $pitchData['image_1'], 'pitch-main' ); ?>',
        'venue_image_url':'<?php echo getImageURL( $venueData['image_1'], 'pitch-main' ); ?>',
        'pitch_link':'<? echo get_permalink($pitchID) ?>',
        'venue_link':'<? echo get_permalink(getVenueID($pitchID)) ?>',
        'venue_dates':'<? echo get_permalink(getVenueID($pitchID)) ?>',
        'discount':'<? echo get_field('price',($pitchID)) ?>',
        'slots':[
            <? echo getEachSlot($pitchID) ?>
                ]
    });

        <?
    endwhile;

    wp_reset_postdata();
    ?>

    $(function () {
        console.log('results:');
        console.log(results);
        var options = {
            results:results
        };

        PW.pitchSearch.init(options);
    });

</script>